<template>
    <div class="msj_spellstatedetail">
        <div style="padding: 10px 0; font-size: 24px; font-weight: 700;">
            <i class="el-icon-arrow-left" @click="goback"></i>
        </div>
        <!-- 订单步骤 -->
        <div v-show="spstate.state=='成功'" style="padding: 10px 0;">
<el-steps :active="active" align-center finish-status="success">
  <el-step title="买家下单" :description="spstate.ddtimes"></el-step>
  <el-step title="买家付款" :description="spstate.ddtimes"></el-step>
  <el-step title="商家发货" :description="fahuotimes"></el-step>
  <el-step title="订单完成" :description="ddtimes"></el-step>
</el-steps>
        </div>
        <!-- 订单信息 -->
        <div class="msj_spellstate_info">
            <li class="msj_spellstate_info_l">
                <p><span>订单编号:</span> {{ spstate.dingdannum }}</p>
                <p v-show="spstate.state=='成功'"><span>平台单号:</span> {{ spstate.ptdanhao }}</p>
                <p><span>付款方式:</span> {{ spstate.fkfangshi }}</p>
                <p style="color: #519ECA;"><span>买家:</span> {{ spstate.maiuser }}<i class="el-icon-question" style="margin-left: 5px; color: #666;"></i></p>
                <p><span>付款方式:</span> {{ spstate.psfangshi }}</p>
                <p><span>收货人:</span> {{ spstate.shuser }} <el-button type="text" 
                    v-clipboard:copy="spstate.shuser"
        v-clipboard:success="firstCopySuccess"
        v-clipboard:error="firstCopyError"
                    >复制</el-button></p>
                    <el-button type="primary" size="small" @click="open" style="padding: 5px;">修改订单收货信息</el-button>   
            </li>
            <!-- 弹出修改收货信息 -->
            <el-dialog title="修改订单收货信息" :modal="false" :visible.sync="dialogFormVisible">
  <el-form :model="form" :rules="rules" ref="ruleForm">
    <el-form-item label="号码" prop="phone" :label-width="formLabelWidth">
      <el-input v-model="form.phone" minlength="11" maxlength="11" :keyup="form.phone=form.phone.replace(/\D/g,'')" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="收货地址" prop="address" :label-width="formLabelWidth">
        <el-cascader
        v-model="form.address"
    :options="options"
    :props="{ checkStrictly: true }"
    clearable></el-cascader>
    </el-form-item>

    <el-form-item label="具体地址"  prop="region" :label-width="formLabelWidth">
      <el-input v-model="form.region" :keyup="form.region = form.region.replace(/\s+/g, '')" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="onclose" style="padding: 5px;">取 消</el-button>
    <el-button type="primary" @click="isok('ruleForm')" style="padding: 5px;">确 定</el-button>
  </div>
</el-dialog>
<!-- 遮罩 -->
<div class="zhezaho" v-show="dialogFormVisible"></div>
<!--  -->
            <li style="box-sizing: border-box; padding: 15px 20px;">
                <h4>
                    <span>订单状态:</span>
                    <span :class="spstate.ddstate=='已关闭'?'msj_ddstate2':'msj_ddstate'">{{ spstate.ddstate }}</span>
                    <span v-show="spstate.ddstate=='待发货'">(买家已付款,请商家尽快发货)</span>
                    <span v-show="spstate.ddstate=='已关闭'">(关闭时间:{{ spstate.ddtimes }})</span>
                </h4>
                <div v-show="spstate.state=='成功'" style="margin: 0 0 20px;">
                    <p style="padding: 10px 0; color: #666;" v-if="spstate.ddstate=='订单完成'">订单已完成</p>
                    <el-button  type="primary" @click="oksuccess" v-else style="padding: 5px;" size="small">{{spstate.ddstate=='待发货'?'确认发货':'确认订单完成'}}</el-button>
                    
                </div>
                <p v-show="spstate.ddstate=='待发货'" style="padding: 10px 0; font-size: 13px; color: #999;">友情提示:如果无法进行发货,请及时联系买家进行妥善处理;</p>
            </li>
        </div>

        <!-- 商品信息 -->
        <h3 style="font-size: 14px; padding: 15px 0;">商品信息</h3>
        <div>
            <el-table
    :data="tabledata"
    border
    style="width: 100%">
    <el-table-column
      label="商品标题"
      width="180">
      <template slot-scope="scope">
        <div class="msj_shops_info">
          <div class="msj_shops_img">
            <img :src="scope.row.spinfos.img" alt="">
          </div>
          <span>{{ scope.row.spinfos.name }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      label="规格、编号、条码"
      width="180">
      <template slot-scope="scope">
        <div style="font-size: 13px; color: #999;">
            <p>规格:{{ scope.row.spinfos.guige }}</p>
          <p>编号:{{ scope.row.spinfos.bianm }}</p>
          <p>条码:{{ scope.row.spinfos.tiaom }}</p>
        </div>   
      </template>
    </el-table-column>
    <el-table-column
      label="单价">
      <template slot-scope="scope">
        <div style="font-size: 13px; color: #999;">
            <p>￥{{ scope.row.danjia }}</p>
        </div>
    </template>
    </el-table-column>

    <el-table-column
      label="数量">
      <template slot-scope="scope">
        <div style="font-size: 13px; color: #999;">
            <p>{{ scope.row.nums }}个</p>
        </div>
        </template>
    </el-table-column>

    <el-table-column
      label="原价">
      <template slot-scope="scope">
        <div style="font-size: 13px; color: #999;">
            <p>￥{{ scope.row.yuanjia }}</p>
        </div>
        </template>
    </el-table-column>

    <el-table-column
      label="折扣后">
      <template slot-scope="scope">
        <div style="font-size: 13px; color: #999;">
            <p>￥{{ scope.row.goumprice }}</p>
        </div>
        </template>
    </el-table-column>

    <el-table-column
      prop="fukuanstate"
      label="状态"
      width="180">
    </el-table-column>
  </el-table>
  <div class="msj_spinfo_fukuan">
    <div>
        <p>商品小计: <span style="color: #666;">￥{{ spstate.goumprice }}</span></p>
        <p>运费: <span>￥{{ spstate.yunfei }}</span></p>
        <p>实付款: <span style="color: red;">￥{{ spstate.goumprice }}</span></p>
    </div>
  </div>
  
        </div>
    </div>
</template>

<script>
import province from '../citys/city1.js'
import {setmsjpinspstate,getmsjpinspstate} from '@/utils/api'
export default {
    name: 'PhaemacySpellstatedetail',
    data() {
        return {
            active:2,
            fahuotimes:'',
            ddtimes:"",
            spstate:{},
            tabledata: [],
            dialogFormVisible:false,
        form: {
          phone: '',
          address: [],
          region:''
        },
        rules: {
            phone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { min: 11, max: 11, message: '长度11位', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请填写具体地址', trigger: 'change' }
          ],
          address: [
            { type: 'array', required: true, message: '请选择地址', trigger: 'change' }
          ]
        },
        formLabelWidth: '120px',
        options: [
        ],
        }
    },
    created(){
      this.spstate=this.$route.params.ddtimes?this.$route.params:JSON.parse(sessionStorage.getItem('spellmsjstates'))
      this.tabledata=[{...this.spstate}]
      this.getpinstate(this.spstate)
      this.options=province.map((item)=>{
            let obj={
                value:item.name,
                label:item.name,
                children:[]
            }
            obj.children=item.city.map((item2)=>{
                let obj2={
                    value:item2.name,
                    label:item2.name,
                    children:[]
                }
                obj2.children=item2.districtAndCounty.map(item3=>{
                    return {
                    value:item3,
                    label:item3
                    }
                })
                return obj2
            })
            return obj
      })
    },
    mounted() {
       
    },

    methods: {
        // 返回 
        goback(){
            this.$router.push({
            name:'spell',
            params: {
                curr:4
            }
            })
        },
        // 
        getpinstate(v){
            getmsjpinspstate().then(res=>{
                let data=res.data.data
                this.spstate=data.find(item=>item.id==v.id)
                this.spstate.spinfos=JSON.parse(this.spstate.spinfos)
                if(this.spstate.ddstate=='已发货'){
                    this.active=3
                    this.fahuotimes=new Date().toLocaleString()
                }else if(this.spstate.ddstate=='订单完成'){
                    this.active=4
                    this.ddtimes=new Date().toLocaleString()
                }
            })
        },
        firstCopySuccess(e) {
            this.$message.success('复制成功')
        },
    firstCopyError(e) {
        this.$message.error('复制失败')
    },
    // 打开弹出框
    open(){
        this.dialogFormVisible=true   
       let s=this.spstate.shuser.split(',')
       this.form.phone=s[2] 
       this.form.address=s[0].split(' ')
       this.form.region=s[1]
    },
    // 关闭弹出框
    onclose(){
        this.dialogFormVisible=false  
    },
    isok(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.spstate.shuser=this.form.address.join(' ')+','+this.form.region+','+this.form.phone
            let obj={...this.spstate}

            obj.spinfos=JSON.stringify(obj.spinfos)
            setmsjpinspstate(obj).then(res=>{
                this.$message.success(res.data.msg)
                this.onclose()
            })
          } else {
            return false;
          }
        });
    },

    oksuccess(){
        let obj=JSON.parse(JSON.stringify(this.spstate))
        obj.spinfos=JSON.stringify(obj.spinfos)
        if(this.spstate.ddstate=='待发货'){
            this.spstate.ddstate='已发货'
            this.fahuotimes=new Date().toLocaleString()
        }else if(this.spstate.ddstate=='已发货'){
            this.spstate.ddstate='订单完成'
            this.ddtimes=new Date().toLocaleString()
        }
        obj.ddstate=this.spstate.ddstate
        setmsjpinspstate(obj).then(res=>{
            this.$message.success(res.data.msg)
            this.active+=1
        })
    }
    },
};
</script>

<style  scoped>
*{
    margin: 0;
    list-style: none;
    padding: 0;
}
    .msj_spellstate_info,.msj_spellstatedetail{
        width: 100%;
    }
    .msj_spellstate_info{
        border: 1px solid #eee;
        display: flex;
    }
    .msj_spellstate_info li{
        width: 50%;
    }
    .msj_spellstate_info li h4{
        font-size: 13px;
        margin: 0 0 20px;
    }
    .msj_spellstate_info li span{
        color: #999;font-size: 13px;
    }
    .msj_spellstate_info_l{
        box-sizing: border-box;
        padding: 15px 20px;
        border-right: 1px solid #eee;
    }
    .msj_spellstate_info_l p{
        font-size: 13px; padding: 5px 0;
        color: #333;
    }
    .msj_spellstate_info_l span{
        color: #999;
        display: inline-block;
        width: 90px;
        text-align: left;
    }


    .msj_spellstate_info li span.msj_ddstate2,.msj_spellstate_info li span.msj_ddstate{
        color: #ffc45f;
        font-size: 20px; margin: 0 10px;
    }
    .msj_spellstate_info li span.msj_ddstate2{
        color: #333;
    }

    .msj_shops_info{
        width: 100%;
        display: flex; font-size: 13px;
        align-items: center;
    }
    .msj_shops_img{
        padding: 10px;
    }
    .msj_shops_img img{
        width: 50px;
        height: 50px;
    }
    .msj_spinfo_fukuan{
        width: 100%;
        display: flex; border: 1px solid #ddd;
        justify-content: flex-end; box-sizing: border-box;
        padding: 5px 10px;
    }
    .msj_spinfo_fukuan p{
        font-size: 13px; 
        color: #999;
        text-align: right;
        padding: 5px 0;
    }
    .msj_spinfo_fukuan span{
        display: inline-block;
        width: 70px;
        text-align: left;
    }
    .zhezaho{
        width: 100%;
        height: 100vh;
        opacity: .5;
        position: fixed;
        top: 0;left: 0;
        background: #333;
        z-index: 999;
    }

    .el-form-item{
        margin-bottom: 15px;
    }
</style>